<template><!---->
	<div id="test">
	<div v-if="type == 0">
	    <div style="background: rgb(231, 231, 241);padding:10px;margin-top:10px;"> 
	      <!--<title-top :fnlist="initObj.Fnlist"></title-top>-->
	                      异常次数最多的题目 <Tag color="purple">{{exceptionTotalStatics.topTargetName}}</Tag>
		    <Button type="primary" @click="getTargetExceptionDetail" style="margin-left:20px">异常详情</Button>
	    </div>
	</div>   
    <!--<title-top :fnlist="initObj.Fnlist"></title-top>-->
    <table-body :options="initObj"></table-body>
    <Modal v-model="exceptionDetailModal.show"
               :title="exceptionDetailModal.title"
               width="1000"
               :mask-closable = "false"
               footer-hide
        >
        <Row class="targetHeader" v-if="exceptionDetailTotal > 0">
            <Page :total="exceptionDetailTotal"
                  :page-size="queryTargetExceptionInfo.pageSize"
                  show-total show-elevator
                  @on-change="changeExceptionDetailPage" style="float: right">
            </Page>
        </Row>
        <Table :columns="exceptionDetailColumn" :data="exceptionDetailList"></Table>
    </Modal>
  </div>
</template>
<script>
//	import Cookies from 'js-cookie'
import {targetExceptionLog,targetExceptionDetail,getTargetTeamList_new,queryCtfTarget} from '@/api/drill_compete'
import tableBody from '@/view/drill_compete/page/statistics/tableListComponent'
import groupMixin from "@/mixin/groupMixin"
export default {
    name: 'teamRankStatic',
    props:['sceneId','type'],
    mixins: [groupMixin],
	data(){
    const d = function(val){
      this.getTargetExceptionLog(null,null,val)
    }.bind(this);
	  	return {
          targetTeamList: [],
	  	  initObj:{
            Button:[
            ],
            Input:[
            ],
            Select:[
                {
                    optionsValue: [],
                    placeholder: `请选择团队`,
                    fnName: this.getTargetExceptionLogByTeam
                },
                {
                    optionsValue: [],
                    placeholder: `请选择${this.type === 7 ? '任务' : '题目'}`,
                    fnName: this.getTargetExceptionLogByQuestion
                }
            ],
            DatePicker:{
              isShow:false,
              fnName:d,
            },
            Page:{
              total:0,
              currentPage:1,
              pageSize:10
            },
            Table:{
              listCol:[
//              {
//                type: 'index',
//                align: 'center',
//                key:'rank',
//                ellipsis:true,
//                width:60
//              },
                {
                  title:'题目显示名称',
                  key:'targetName',
                  align:'center',
                  ellipsis:true,
                  tooltip:true,
                  placement:'top-left'
                },
                {
                  title:'团队名称',
                  key:'teamName',
                  align:'center',
                  ellipsis:true,
                  tooltip:true,
                },
                {
                  title:'检测结果时间',
                  key:'checkTime',
                  align:'center',
                  ellipsis:true,
                  tooltip:true,
                },
				{
				  title:'异常原因',
				  key:'errMsg',
				  align:'center',
				  ellipsis:true,
				  tooltip:true,
				}
              ],
              listData:[]
            },
            Fnlist:'getTargetExceptionLog',
        },
//      sencenId:'',
        selTeamId:'',
        selTargetName:'',
        timeout:{},
        exceptionTotalStatics:{},
        //异常详情
        exceptionDetailModal:{
        	show:false,
        	title:'异常详情'
        },
        exceptionDetailList:[],
        exceptionDetailTotal:[],
        exceptionDetailColumn:[
        	{
        		title:'题目显示名称',
        		key:'targetName',
        		tooltip:true,
                placement:'top-left',
                width:150
        	},
        	{
        		title:'异常次数',
        		key:'oneCount',
        		placement:'top-left',
        	},
        ],
        queryTargetExceptionInfo:{
        	pageIndex:1,
        	pageSize:10
        }
      }
	},
    components:{
//    'title-top':titleTop,
      'table-body':tableBody
    },
    watch:{
        teamList(newValue) {
            this.initObj.Select[0].optionsValue = newValue
        },
        targetTeamList(newValue) {
            this.initObj.Select[1].optionsValue = newValue
        }
    },
    created(){
      //this.getRankingStatic();
    },
	mounted(){
		if(![2, 4, 7, 9].includes(this.type)){
			this.initObj.Table.listCol.splice(2,0,{
				title:'周期',
                key:'number',
                align:'center',
//              ellipsis:true,
//              tooltip:true,
                render:(h,params) => {
                  	return h('span',params.row.number ? `第${params.row.number}周期` : '无')
                }
			})  
			this.initObj.Table.listCol.splice(3,0,{
            	title:'状态',
              	key:'status',
              	align:'center',
              	ellipsis:true,
              	tooltip:true,
              	render:(h,params) =>{
              		return h('span',this.statusFilter(params.row.status))
              	}
			}) 
		}else if(this.type == 7){
			this.initObj.Table.listCol.splice(1,1)  //综合演练不显示团队
		}
    	this.getTargetExceptionLog();
		this.getTargetTeamList_new()
	},
	beforeDestroy(){
		clearTimeout(this.timeout)
	},
	methods:{
        getTargetTeamList_new(){
            if (this.type === 2) {
                queryCtfTarget(this.$route.query.id, {
                    pageIndex:1,
                    pageSize:2147483647
                }).then(data => {
                    if(data.code==1){
                        this.targetTeamList = data.data.items || data.data;
                    }else{
                        this.targetTeamList = []
                    }
                }).catch(error => {
                    this.$Message.error('获取列表失败');
                })
            } else {
                getTargetTeamList_new({
                    pageIndex:1,
                    pageSize:2147483647,
                    sceneId:this.$route.query.id,
                    projectId:this.$route.query.prjid
                }).then(data => {
                    if(data.code==1){
                        this.targetTeamList = data.data.items || data.data;
                    }else{
                        this.targetTeamList = []
                    }
                })
            }
        },
		getTargetExceptionDetail(){
			targetExceptionDetail(this.$route.query.id,this.queryTargetExceptionInfo).then(data => {
				if(data.code == 1){
					this.exceptionDetailList = data.data.items;
					this.exceptionDetailTotal = data.data.total;
				}else{
					this.$Message.error(data.message);
				}
				this.exceptionDetailModal.show = true;
			}).catch(error => {
			})
		},
		changeExceptionDetailPage(page){
			this.queryTargetExceptionInfo.pageIndex = page;
			this.getTargetExceptionDetail();
		},
        getTargetExceptionLogByTeam(id) {
            this.selTeamId = id
            this.getTargetExceptionLog();
        },
        getTargetExceptionLogByQuestion(id) {
            this.selTargetName = this.getQuestionNameById(id)
            this.getTargetExceptionLog();
        },
        getQuestionNameById(id) {
            let question = this.targetTeamList.find(item => {
                return item.id === id
            })
            return question ? question.name : ''
        },
	    getTargetExceptionLog(page,pageSize,querytime){
	      let _this = this;
	      let pages = page || 1;
        this.$set(this.initObj.Page, 'currentPage', pages)
	      let rows = pageSize||_this.PZ|| 10;
	      let id = '';
	      let params={
	        pageIndex : pages,
	        pageSize : rows,
	        sceneId:this.$route.query.id
	      };
	      if(this.selTeamId){
	        params.teamId =  this.selTeamId;
	      }
	      if(this.selTargetName){
	        params.targetName =  this.selTargetName;
	      }
	      //if(querytime){
	        //params.createtime = querytime[0];
	        //params.lastupdatetime = querytime[1];
	      //}
	      if(_this.$route.query.id){
	        targetExceptionLog(params).then(data=>{
	          if(data.code==1){
	          	_this.exceptionTotalStatics = data.data;
	            _this.initObj.Table.listData = data.data.items;
	            _this.initObj.Page.total = data.data.total;
	            clearTimeout(this.timeout)
            	this.timeout = setTimeout(() => {
            		this.getTargetExceptionLog(page,pageSize);
            	},3000)
	          }
	        })
	      }
	    },
	    saveInfo(val){
	    },
	    statusFilter(val){
	      let str = '';
	      switch (val) {
	      	case 0:str = '异常未统计';break;
	        case 1:str = '异常已统计';break;
	        case 2:str = '取消统计';break;
	        default:break;
	      }
	      return str;
	    }
    },
}
</script>

<style>
  .drillsTable .ivu-poptip-body {
    text-align: left!important;
  }
  .scenesHeader{
    margin-bottom: 16px;
  }
  .drillTables{
    min-height: 300px;
  }
  .drillsTable.ivu-table-wrapper{
    overflow: inherit;
  }
</style>
<style scoped>
  .Titles{
    background: #eeeeee;
    margin: 16px auto;
    padding: 10px 0;
  }
  .targetHeader{
    padding: 10px;
    margin-bottom: 10px;
  }
  
</style>
